<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>全量shp模型</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>

    <div id="mapContainer" style="position: relative;">
    </div>

</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    var shapeObject;
    var mergeBuildings = true;
    window.app = new GE.App('mapContainer', {
        position: [120.0111296944484, 30.242285403905438, 2000],
        lookAt: [120.0111296944484, 30.242285403905438, 0],
        cameraScrollSpeed: 15,
        minZoom: 3,
        maxZoom: 22,
        ambientLightIntensity: 3,
        ambientLightType: 'hemiSphere',
        useCarpet: true,
        background: "Fog", //添加shp文件或矢量底图的背景应尽量选用雾模式
        useDefaultTexture: true, //是否使用瓦片默认纹理
        // ShapeConfig: {textEncode: 'gbk'},
        textEncode: 'gbk', //poi文字的编码
        // polygonFillColor: '#DC143C', //shape数据多边形的颜色
        baseLayer: [
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                readableUrl: true,
                tileType: 'image',
            },
            //  //shape底图
            //  {
            //     url: 'http://localhost:9000/examples/resources/shp/储罐/储罐/L{z}/{y}/{x}.shp', //shape底图的url
            //     urlDecimal: true, //shape底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
            //     tileType: 'shape',  //shape底图
            //     canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            //     merge: true //几何体是否合并
            // },
        ]
    });

    shp();
    btn();

    function shp() {
        shapeObject = new GE.ShapeObject({
            url: [
                'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/shp/yuhang_all/buildings.shp',
                'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/shp/yuhang_all/places.shp',
                'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/shp/yuhang_all/points.shp',
                'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/shp/yuhang_all/railways.shp',
                'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/shp/yuhang_all/roads.shp',
                'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/shp/yuhang_all/waterways.shp',
                'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/shp/yuhang_all/natural.shp',
                'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/shp/yuhang_all/landuse.shp',
            ],
            heightField: 'H', //shp中代表建筑高度的字段
            lineWidth: 5, //矢量的线宽度
            merge: true //此参数设置为true后会大幅提升性能但是无法单体化
        });
        app.add(shapeObject);

        if (!mergeBuildings) {
            app.on('Click', function (event) {
                //shpProperty中存储了shp文件中对象的属性
                if (event.objs.object.shpProperty) {
                    console.log(event.objs.object.shpProperty);
                }
            })
        }
    }

    function btn() {
        let button = new GE.Button('模型显隐', function () {
            shapeObject.visible = !shapeObject.visible;
        });
        app.ui.add(button);
        window.button = button;

        let button2 = new GE.Button('模型右移10米', function () {
            shapeObject.position.x += 10;
        });
        app.ui.add(button2);
    }
</script>

</html>